<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
        <title></title>
        <style type="text/css">
            *{margin: 0;padding: 0;}
            html{width: 100%;height: 100%;}
            body{background: url(interview_bg.png) no-repeat center 0/1920px 920px;}
            .content{width: 1300px;height: 850px;margin: 0 auto;margin-top: 50px;}
            .left_wrap,.right_wrap{display: inline-block;border: 1px solid #808080;background: rgba(0,0,0,.4); }
            .left_wrap{width: 766px;height: 100%; float: left;}
            .right_wrap{width: 514px;height: 100%;float: right;}
            .clearfix{clear: both;}
            .title{width: 100%;height: 60px;line-height: 60px;font-size: 16px;color: #fff;text-align: center;background: rgba(255,255,255,.1);letter-spacing: 5px;font-weight: bold;}
            .house{color: #f4ea4e !important;}
            .list.news{padding: 30px 20px;overflow: hidden;height: 730px;}
            .list.facing{padding: 0px 30px;}
            .list ul{height: 100%;overflow: hidden;}
            .news .item{width: 100%;height: 110px;margin-bottom: 12px;background: rgba(255,255,255,.2);}
            .news .image{display: inline-block;vertical-align: top;}
            .news .info{display: inline-block;vertical-align: top;padding: 19px 30px;}
            .news .name{font-size: 20px;color: #FFFFFF;}
            .news .planing{font-size: 16px;color: #CCCCCC;margin-top: 24px;}

            .facing{height: 790px;}
            .facing ul {height: 100%;overflow: hidden;}
            .facing .item{height: 60px;line-height: 60px;border-bottom: 1px dashed rgba(255,255,255,.2);font-size: 16px;}
            .facing .item .name{color: #FFFFFF;display:inline-block;min-width: 120px;}
            .facing .state,.facing .date,.facing .time{color: #CCCCCC;}
            .facing .date,.facing .time{float: right;}
            .facing .time{margin-left: 15px;}
            .facing .state{}
        </style>
    </head>
    <body>
        <div class="content">
            <!--|左边最新动态框|-->
            <div class="left_wrap">
                <div class="title">
                    <p>最新动态</p>
                </div>
                <div class="list news">
                    <ul>
                        <!--最多显示6个，其余隐藏-->
                        <!--{loop}-->
                        <li class="item">
                            <div class="image">
                                <img src="conference_room.png"/>
                            </div>
                            <div class="info">
                                <!--{这里填写姓名}-->
                                <p class="name">李明</p>
                                <p class="planing">
                                    请到
                                    <!--这里填写第几会议室-->
                                    <span class="house">第三会议室</span>
                                    参加面试
                                </p>
                            </div>
                        </li>
                        <!--{loop end}-->
                    </ul>
                </div>
            </div>
            <!--|右边进行中的面试框|-->
            <div class="right_wrap">
                <div class="title">
                    <p>进行中的面试</p>
                </div>
                <div class="list facing">
                    <ul>
                        <!--最多显示13个，其余隐藏-->
                        <!--{loop}-->
                        <li class="item">
                            <!--{姓名}-->
                            <span class="name">邓超</span>
                            <!--{状态}-->
                            <span class="state">等待</span>
                            <!--{时间}-->
                            <span class="time">09:41</span>
                            <!--{日期}-->
                            <span class="date">8月29日</span>
                            <div class="clearfix"></div>
                        </li>
                        <!--{loop end}-->
                    </ul>
                </div>
            </div>		
            <div class="clearfix"></div>
        </div>
        <script type="text/javascript">
//            var time = new Date();
//            alert(time + "<br/>" + time.getFullYear() + "-" + (time.getMonth() + 1) + "-" + time.getDate() + " " + time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds());
            var loadNews = function () {
                $.ajax({
                    type: "get",
                    //接口地址
                    url: "json/demo.json",
                    async: false,
                    dataType: 'json',
                    success: function (data) {
                        var result = "";
                        for (var i = 0; i < 6; i++) {
                            result += '<li class="item">' + '<div class="image">' + '<img src="conference_room.png"/>' + '</div>' +
                                    '<div class="info">' + '<p class="name">' + data.news[i].name + '</p>' +
                                    '<p class="planing">' + "请到" + '<span class="house">' + data.news[i].house + '</span>' + "参加面试" +
                                    '</p>' + '</div>' + '</li>';
                        }
                        $('.news ul').empty();
                        $('.news ul').append(result);
                    },
                    error: function () {
				alert("ajax error");
                    },
                    complete: function (XMLHttpRequest, textStatus) {
	            console.log(XMLHttpRequest.responseText);
	            console.log(textStatus);
                    },
                });
            }
            loadNews();
            //每10秒钟请求一次
            setInterval(loadNews, 10000);
            var loadFacing = function () {
                $.ajax({
                    type: "get",
                    //接口地址
                    url: "json/demo.json",
                    async: false,
                    dataType: 'json',
                    success: function (data) {
                        var result = "";
                        for (var i = 0; i < 13; i++) {
                            result += '<li class="item">' +
                                    '<span class="name">' + data.lists[i].name + '</span>' +
                                    '<span class="state">' + data.lists[i].status + '</span>' +
                                    '<span class="time">' + data.lists[i].time + '</span>' +
                                    '<span class="date">' + data.lists[i].date + '</span>' +
                                    '<div class="clearfix">' + '</div>' +
                                    '</li>';
                        }
                        $('.facing ul').empty();
                        $('.facing ul').append(result);
                    },
                    error: function () {
//				alert("ajax error");
                    },
                    complete: function (XMLHttpRequest, textStatus) {
//	            console.log(XMLHttpRequest.responseText);
//	            console.log(textStatus);
                    },
                });
            }
            loadFacing();
            //每10秒钟请求一次
            setInterval(loadFacing, 10000);
        </script>
    </body>
</html>



